<template>
    <div class="index_page share_page">
        <ul class="gift_send_pro">
            <li v-for="item in step_list" v-bind:class="{ active: item.is_active==true, current_active: item.value==now_step }">
                <img :src="item.is_active==true?item.active_img:item.normal_img">
                <p v-text="item.name"></p>
            </li>
        </ul>
        <div v-show='now_step==2' class="gift_share_wrap">
            <div class="gift_share_img" :style="{'background-image': 'url(' +default_back_img+')'}">
                <img :src="totalImg" />
                <div class="gift_share_add">
                    <p>
                        1、点击右上角分享，将礼物分享给好友。
                    </p>
                    <p>
                        2、长按海报，发送海报图片给好友。
                    </p>
                </div>
            </div>
    
        </div>
    </div>
</template>

<script>
import api from '@/api/api'
import shareApi from '@/tools/mp_sdk'
import wx from 'weixin-js-sdk'
let Base64 = require('js-base64').Base64;
let c = document.createElement('canvas');
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
    var min_size = Math.min(w, h);
    if (r > min_size / 2) r = min_size / 2;
    // 开始绘制
    this.beginPath();
    this.moveTo(x + r, y);
    this.arcTo(x + w, y, x + w, y + h, r);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
}
CanvasRenderingContext2D.prototype.halfRoundRect = function(x, y, w, h, r) {
    if (w < 2 * r) {
        r = w / 2;
    }
    if (h < 2 * r) {
        r = h / 2;
    }
    this.beginPath();
    this.moveTo(x, y);
    this.lineTo(x + w, y);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.lineTo(x, y);
    this.closePath();
    return this;
}
export default {
    name: 'giftShare',
    data() {
        return {
            default_user_img: require('assets/images/default_user.jpeg'),
            user_img: require('assets/images/header_icon.png'),
            default_img: require('assets/images/watchs.jpg'),
            default_back_img: require('assets/images/loading.png'),
            now_step: 2,
            order_data: {},
            totalImg: '',
            share_qr_code: '',
            step_list: [
                {
                    name: '1.填写信息',
                    value: 0,
                    is_active: true,
                    active_img: require('assets/images/icon_write.png'),
                    normal_img: require('assets/images/icon_write.png')
                },
                {
                    name: '2.确认信息',
                    value: 1,
                    is_active: true,
                    active_img: require('assets/images/icon_confirms.png'),
                    normal_img: require('assets/images/icon_confirm.png')
                },
                {
                    name: '3.赠送礼物',
                    value: 2,
                    is_active: true,
                    active_img: require('assets/images/icon_givings.png'),
                    normal_img: require('assets/images/icon_giving.png')
                }
            ]
        }
    },
    methods: {
        postStepChange: function (val) {
            var _self = this;
            _self.now_step += 1;
            _self.step_list[val + 1].is_active = true;
        },
        getOrderInfo: function () {
            let order_params = {
                functioncode: 'give_gifts_info',
                gift_id: this.$route.params.order_id
            }
            var _self = this;
            api.get(order_params).then((res) => {
                if (res.data.returncode == '000000') {
                    _self.order_data = res.data.record;
                    _self.order_data.resource_image = _self.imgCheck(_self.order_data.resource_image);
                    let hash_path = Base64.encode('#/gift/receive/' + _self.$route.params.order_id);
                    shareApi.initConfig({
                        mpID: _self.mp_id,
                        userID: _self.user_id,
                        shareData: {
                            shareTitle: '送你：' + _self.order_data.resource_name,
                            shareContent: '哒哒哒，我送了一个礼物给你，快点开领取吧~',
                            shareImgUrl: _self.order_data.resource_image,
                            shareLink: _self.current_host + '/mallsend?flag_type=share&hash_path=' + hash_path + '#/gift/receive/' + _self.$route.params.order_id,
                        }
                    });

                    if (res.data.record.pay_state == 0) {
                        this.$toast('该订单尚未支付，请支付后再来分享~');
                        let pay_url = '';
                        if (_self.wx_pay_way == 'special_self' || _self.wx_pay_way == 'special_sub') {
                            pay_url = _self.current_host + "/mp/order/pay/" + this.$route.params.order_id + '?from=mallsend';
                        } else {//统一支付逻辑
                            pay_url = _self.unified_pay_host + "/mp/common/wxpay/order/" + this.$route.params.order_id + '?from=mallsend';
                        }
                        window.location.replace(pay_url);
                        return;
                    } else {
                        require('../tools/jquery.min.js');
                        require('../tools/jquery.qrcode.min.js');
                        this.useQrcode();
                        this.draw();
                        return;
                    }

                }

            });

        },
        imgCheck: function (value) {
            if (value.length > 50) {
                return value;
            } else {
                return this.img_url + value;
            }
        },
        useQrcode: function () {
            let share_data = this.current_host + '/mallsend#/gift/receive/' + this.$route.params.order_id;
            this.share_qr_code = this.current_host + "/qrcode/" + encodeURIComponent(Base64.encode(share_data));
        },
        draw: function () {
            require('../tools/jquery.min.js');

            var ctx = c.getContext('2d');
            c.width = 740;
            c.height = 965;
            ctx.rect(0, 0, c.width, c.height);
            ctx.fillStyle = 'transparent';
            ctx.fill();

            //底图
            var bg_img = new Image;
            bg_img.src = this.current_host + '/static/weixin/common/images/share_background.png';
            var _self = this;
            bg_img.onload = function () {
                ctx.drawImage(bg_img, 0, 0, 740, 965);
                //用戶頭像
                var user_img = new Image;
                user_img.src = _self.current_host + '/static/weixin/common/images/share_touxiang.png';
                user_img.onload = function () {
                    ctx.drawImage(user_img, 30, 20, 90, 90);

                    var yqk_con = c.getContext("2d");
                    //设置字体样式
                    yqk_con.font = "36px Arial";
                    yqk_con.fillStyle = "#333";
                    yqk_con.fillText(_self.order_data.real_name, 140, 82);
                    //赠言题目
                    yqk_con.font = "30px Arial";
                    yqk_con.fillStyle = "#212121";
                    yqk_con.fillText('赠言：', 30, 631);
                    //赠言
                    yqk_con.font = "28px Arial";
                    yqk_con.fillStyle = "#212121";
                    _self.draw_long_text(_self.order_data.words, yqk_con, 30, 645, 28)

                    //图片边框
                    var ctx2 = c.getContext('2d');
                    ctx2.fillStyle = "#ddd";
                    ctx2.shadowColor = "#858585";
                    ctx2.shadowBlur = 20;
                    ctx2.fillRect(31, 133, 680, 388);
                    

                    //商品图片
                    var mall_img = new Image;
                    mall_img.src = _self.current_host + '/static/weixin/common/images/youfu_share.png';

                    mall_img.onload = function () {
                        ctx.drawImage(mall_img, 32, 134, 680, 388);

                        //商品标题遮罩
                        ctx.strokeStyle = "rgba(0,0,0,0)";
                        ctx.fillStyle = "rgba(228, 9, 9, 0.7)";
                        //ctx.fillRect(32, 422, 680, 100);
                        ctx.halfRoundRect(32, 422, 680, 100, 8).stroke();
                        ctx.fill();
                        //商品标题
                        yqk_con.font = "34px Arial";
                        yqk_con.fillStyle = "#fff";
                        yqk_con.shadowColor = 'rgba(228, 9, 9, 0)';
                        yqk_con.fillText(_self.order_data.resource_name, 60, 488);

                        var qr_code_img = new Image;
                        qr_code_img.src = _self.share_qr_code;
                        qr_code_img.onload = function () {
                            ctx.drawImage(qr_code_img, 522, 622, 182, 182);

                            yqk_con.font = "28px Arial";
                            yqk_con.fillStyle = "#BC151A";
                            yqk_con.fillText('扫码领取礼物', 525, 860)

                            _self.totalImg = c.toDataURL("image/png");
                        }
                        qr_code_img.onerror = function () {
                            alert('qr_code_img头像error');
                        }


                    }
                    mall_img.onerror = function () {
                        alert('mall_img头像error');
                    }

                }
                user_img.onerror = function () {
                    alert('用户头像error');
                }
            }
        },
        getLength: function (str) {
            var realLength = 0,
                len = str.length,
                charCode = -1;
            for (var i = 0; i < len; i++) {
                charCode = str.charCodeAt(i);
                if (charCode >= 0 && charCode <= 128) realLength += 1;
                else realLength += 2;
            }
            return realLength;
        },
        draw_long_text: function (longtext, cxt, begin_x, begin_y, size) {
            var context = cxt;
            context.textAlign = 'left';
            var str_len = this.getLength(longtext);

            //全部文字的寬度 px
            var str_width = parseInt(str_len * size / 2);
            //全部文字按行拆分数组
            var str_arr = [];
            //每一行的宽度
            var win_width = 446;
            str_arr[1] = [];

            for (var i = 0; i < longtext.length; i++) {
                //当前数组
                let now_arr_length = str_arr.length - 1;
                var curr_width = this.getLength(longtext.substring(0, i)) * size / 2;

                if (curr_width < now_arr_length * win_width) {
                    str_arr[now_arr_length].push(longtext[i]);
                } else {
                    str_arr[now_arr_length + 1] = [];
                    str_arr[now_arr_length + 1].push(longtext[i]);
                }
            }
            for (let i = 1; i < str_arr.length; i++) {
                this.draw_sigle_text(str_arr[i], cxt, begin_x, begin_y + 20 * i + size * i), size;
            }
        },
        draw_sigle_text: function (singleText, cxt, begin_x, begin_y, size) {
            var str_w = 0;
            var singleText_str = singleText.join('');
            cxt.fillText(singleText_str, begin_x, begin_y);
        },
        drawRoundImg: function (obj, x, y, width, height) {
        },
        qnimg_filter: function (val) {
            return val + '?imageView2/1/w/680/h/388/format/jpg/interlace/1';
        }

    },
    computed: {

    },
    /* beforeMount:function(){
         //c = document.createElement('canvas');
     },*/
    mounted: function () {
        this.$nextTick(function () {
            this.getOrderInfo();
        });
    },
}
</script>

<style scoped>
body {
    background: #f2f2f2;
    margin: 0;
}
</style>
